    <template>
  <div>
    <van-nav-bar fixed title="商家详情" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top" :class="requestData.isBookProduct != 1 ? 'has-bottom' : ''">
      <van-swipe class="my-swipe shop-bg-box" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in ShopSignList" :key="index">
          <img-box class="shop-bg-box z-inner pos-r" :img-url="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="mt--60 mlr-25 br-12 bg-white pos-r z-out ofh">
        <bussiness-item type="info" :bussiness-item="bussinessItem" @navigation="navigation" />
        <!-- <bussiness-detail-item type="detail" :bussiness-item="bussinessItem" @navigation="navigation" /> -->
      </div>
      <div>
        <van-tabs
        ref="tabs"
        v-model="active"
        sticky
        class="tabs1"
        :offset-top="$conf.stickyTop"
        @click="ddd"
        @scroll="scroll"
      >
        <van-tab title="商家" >
          <div class="bg-white mg-25 pd-20 br-12">
            <p class="fs-32 fw-b mb-10">商家介绍</p>
            <p v-for="(item,index) in descriptionList" :key="index" class="fs-24 description">{{ item }}</p>
          </div>
        </van-tab>
        <van-tab title="评价">
          <div class="bg-white mg-25 pd-20 br-12">
            <p class="fs-32 fw-b mb-10">全部评价</p>
            <p class="fs-24 description">{{ "暂无评价" }}</p>
          </div>
        </van-tab>
      </van-tabs>
      </div>

    </div>
    <!-- <div class="fixed-bottom bg-white pd-25">
      <van-button round type="primary" @click="gotobuybill">优惠买单</van-button>
    </div> -->

    <!-- 地图弹出层 -->
    <van-popup v-model="AmapShow" position="right" class="mapPage">内容
      <amap-select :data-model="bussinessItem" @closeAmap="closeAmap" />
    </van-popup>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import bussinessItem from 'components/bussinessItem'
import amapSelect from 'components/amapSelect'
import tree from 'components/productList/tree'
import noData from 'components/noData'
import productList from 'components/productList'
import productList2 from 'components/productList/index2'
import shopCart from 'components/shopCart'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import bussinessDetailItem from 'components/bussinessDetailItem'
import { GetSupplierStoreCategory, GetWholeSaleListForSku, GetUserCarList, GetInintProductDetailInfo, AddOrEditUserCarList, GetCommentListByProduct, GetSupplierStoreProductPage} from 'api/product'
import { GetStoreInfo } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import specTree from 'components/productDetail/specTree'
export default {
  components: { 
    imgBox,
    bussinessItem,
    amapSelect,
    tree,
    noData,
    productList,
    productList2,
    shopCart,
    peoductDetail,
    ProductSpec,
    bussinessDetailItem,
		specTree
     },
  data() {
    return {
      scrollTrue:false,
      id: '',
      CardNumber: '',
      ShopSignList: [''],
      bussinessItem: {},
      scollRequest: false,
      descriptionList: [],
      //
      scrollspy: true,
      active0: 0,
      active1: 1,
      active2: 2,
      active: 0,

      // 商品详情接口参数
      requestData: {
        Lng: 0,
        Lat: 0
      },
       // 分类栏配置及数据
      activeId: -1,
      classifyList: [],
      initClassify: true, // 是否需要初始化分类

      // 商品列表
      productList: [],
      updateList: true, // 是否需要更新商品列表

      // 购物车数据
      carList: [],
      AmapShow: false,
      // 商品详情
      detailData: {},
      oldID: 0,
      detailShow: false,

      detailIndex: -1,
      SpecIndex: -1,

      // 评价数据
      evaluateData: {},

      // 收货地址
      addressList: [],

      // sku 商品规格弹窗
      optPopup: {
        data: {},
        type: '',
        change: false,
        show: false
      },

      cartRequestList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      // 请求参数
      requestData: {
        ProductType: 1,
        OrderBy: 'AddTime',
        sort: 'desc',
        PageIndex: 1,
        PageSize: 10,
        isBookProduct: 1, // 0商品 - 1预约
      },
      isShowYuYue: true, // 是否显示预约
      isFirstRequest: true, // 是否是第一次请求
      commentRequest: {
        page: 1,
        size: 3
      }
    }
  },
  computed: {},
  created() {
    console.log(this.$route.query)
    if(this.$route.query.invit_user_id){
      localStorage.setItem('invit_user_id', this.$route.query.invit_user_id)
    }
    if (this.$route.query && this.$route.query.lng) {
      const _query = this.$route.query
      this.requestData.Lng = _query.lng || 0
      this.requestData.Lat = _query.lat || 0
    } else {
      const _GeolocationData = localStorage.getItem('GeolocationData')
      if (_GeolocationData) { // 存在定位缓存
        const _GeolocationObj = JSON.parse(_GeolocationData)
        if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
          this.requestData.Lng = _GeolocationObj.center[0]
          this.requestData.Lat = _GeolocationObj.center[1]
        } else if (_GeolocationObj.position) {
          this.requestData.Lng = _GeolocationObj.position.lng
          this.requestData.Lat = _GeolocationObj.position.lat
        }
      }
    }
    this.id = this.$route.params.id
    this.requestData.Id = this.$route.params.id
    this.GetStoreInfo()
    this.GetUserCarList()
		this.GetBusinessFunction()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
		GetBusinessFunction(){
      GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
      GetBusinessFunction(85).then(res => {
        if (res) {
          this.switch85 = res.Data[0].Value;
        }
      })
			GetBusinessFunction(7).then(res => {
        if (res) {
          this.switch7 = res.Data[0].Value;
        }
      })
    },
		handleScroll () {
				let tabstop = document.querySelector('.tabs1') ? document.querySelector('.tabs1').getBoundingClientRect().top : null
				if(tabstop && tabstop < 52.5){
					this.scrollTrue = true
				}else{
					this.scrollTrue = false
				}

		},
    ddd(data) {
      console.log(data)
      if (data == 0 || data == 1) {
          if (data == 0) {
              if(this.isShowYuYue){
              this.requestData.isBookProduct = 1

              }else{
                this.requestData.isBookProduct = 0
              }
          }
          if (data == 1) {
              this.requestData.isBookProduct = 0
          }
          this.activeId = -1
          this.classifyList = []
          this.initClassify = true
          this.resetParams()
          this.GetUserCarList()
      }
    },
    // 列表checked
    setChecked(arr, bool = false) {
      if (arr && arr.length > 0) {
        arr.forEach(item => {
          item.checked = bool
        })
      }
    },
    // 修改排序方式
    changeSortType(index) {
      if (this.sortActiveIndex !== index) {
        this.resetParams()
        this.sortActiveIndex = index
        this.requestData.OrderBy = this.sortList[index].OrderBy
        this.requestData.Sort = this.sortList[index].Sort
        this.GetWholeSaleListForSku()
      }
      this.filterDataList[2].check = !(this.sortActiveIndex === 0)
      this.filterPopShow = false
      this.filterIndex = -1
    },
    // 预约
    goYu(item, index) {
        console.log(this.requestData.Id,item, index, 'yuRequestList预约');
        this.$router.push({
            path: '/orderSubmit',
            query: {
                storeId: this.id,
                productId: item.ID
            }
        })
    },
    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.detailIndex = index
      const id = item.ID
      if (id === this.oldID) {
        this.detailShow = true
      } else {
        this.oldID = id
        this.GetCommentListByProduct(id)
        this.GetInintProductDetailInfo(id)
      }
    },
    showSpec(item, index) {
      console.log(item)
      this.SpecIndex = index
      this.optPopup.type = 'attr'
      this.optPopup.data = item
      this.optPopup.show = true
    },
    updateCart(item) {
      const _obj = {}
      _obj.ProductId = item.ID
      _obj.Amount = item.Amount
      _obj.SkuId = item.ProductSkuList[0].ID
      _obj.StoreId = this.id
      this.cartRequestList = []
      this.cartRequestList.push(_obj)
      this.AddOrUpdateAmount()
    },
    changeAddress(address) {
      console.log(999)
      this.detailData.UserAddress = address
      // this.$forceUpdate()
    },

    // 规格弹窗组件方法
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    closePopup() {
      this.optPopup.show = false
    },
    searchAdress() {},

    // 底部购物车组件方法
    cleanCart() {
      this.carList = []
      this.optPopup.change = !this.optPopup.change
      this.changeArr(this.productList, false)
    },
    carUpdateCart(bool) {
      if (bool) {
        this.GetUserCarList()
      } else {
        this.changeArr(this.productList, false)
      }
    },

    // 详情弹窗方法
    clickLeft() {
      this.detailShow = false
    },

    // 整理数据
    changeArr(Arr, isNew) {
      const _this = this
      console.log(this)
      Arr.forEach(item => {
        // 图片列表
        if (item.ImageUrl) {
          const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
          item.logo = ImgUrlList[0]
        }
        item.BaseUnit = item.DefaultUnit
        // 单位列表
        if (item.Unit && item.Unit.indexOf(',') !== -1) {
          item.UnitList = item.Unit.split(',')
          item.BaseUnit = item.UnitList[0]
        }
        // 换算比例列表
        if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
          item.UnitratioList = item.Unitratio.split(':')
        }
        // 按单限购
        if (item.ProductSkuList && item.ProductSkuList.length === 1) {
          item.oLimitBuy = item.ProductSkuList[0].LimitBuy
        }
        // 购物车数量（同步）
        if (_this.carList && _this.carList.length > 0) {
          const _list = _this.carList
          for (let i = 0; i < _list.length; i++) {
            if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
              if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
                for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                  if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                    for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                      if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
                        item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
                        console.log('匹配成功')
                        break
                      }
                    }
                  }
                }
              } else { // 单规格商品
                console.log('同步单规格')
                item.Amount = _list[i].Amount
                break
              }
            } else {
              item.Amount = 0
            }
          }
        } else {
          item.Amount = 0
          if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
            for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
              if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                  item.ProductSkuAttrList[j].SkuList[k].Amount = 0
                }
              }
            }
          }
        }
        if (isNew) {
          _this.productList.push(item)
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
       console.log(this.$utils.getScrollHeight('scrollBox'))
        console.log(this.$utils.getClientHeight('scrollBox'))
        console.log(this.$utils.getScrollTop('scrollBox'))
      if (_this.scollRequest === true) {
       
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetWholeSaleListForSku()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },

    // 获取门店商品分类列表
    GetSupplierStoreCategory() {
      GetSupplierStoreCategory({ parent_path: '_0_2_', InfoType: 1,storeId:this.id }).then((res) => {
        if (res) {
          this.initClassify = false
          this.classifyList = []
          const totalClassify = {
            OrderBy: res.Data.OrderBy,
            id: res.Data.id,
            name: res.Data.name,
            parent_id: res.Data.parent_id,
            parent_path: res.Data.parent_path,
            type_id: res.Data.type_id
          }
          this.classifyList.push(totalClassify)
          if (res.Data.children && res.Data.children.length > 0) {
            res.Data.children.forEach((item) => {
              this.classifyList.push(item)
            })
          }
          this.activeId = res.Data.id
          this.requestData.typePath = res.Data.parent_path
          this.productList = []
          this.GetWholeSaleListForSku()
        }
      })
    },

    // 获取商品列表
    GetWholeSaleListForSku() {
      const _this = this
      _this.requestData.storeId = this.id
      GetSupplierStoreProductPage(_this.requestData).then(res => {
        if (res) {
            // 第一次请求判断是否有预约服务商品(有不执行,无执行隐藏服务且请求商品)
          if (_this.isFirstRequest && res.Data.RecordAmout <= 0) {
              _this.isShowYuYue = false
              _this.isFirstRequest = false
              _this.requestData.isBookProduct = 0
              _this.GetWholeSaleListForSku()
              return
          }
          if (_this.isFirstRequest) {
              _this.isFirstRequest = false
          }
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            console.log('购物车数据')
            console.log(_this.carList)
            console.log(res.Data.Data)
            this.changeArr(res.Data.Data, true)
            _this.totalAmout = res.Data.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },

    // 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1,storeId:this.id }).then(res => {
        if (res) {
          this.carList = res.Data
          if (this.initClassify) {
            this.GetSupplierStoreCategory()
          } else if (this.updateList) {
            this.changeArr(this.productList, false)
          }
        }
      })
    },

    // 获取商品详情
    GetInintProductDetailInfo(id) {
      GetInintProductDetailInfo({ productId: id, InfoType: 1 }).then(res => {
        if (res) {
          this.detailData = res.Data
          this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
          this.detailShow = true
        }
      })
    },

    // 更新购物车
    AddOrUpdateAmount() {
      let param = {}
      param.list = this.cartRequestList
      AddOrEditUserCarList(param).then(res => {
        if (res) {
          console.log(res)
          this.optPopup.show = false
          this.updateList = false
          this.GetUserCarList()
        }
      })
    },

    // 获取评价
    GetCommentListByProduct(id) {
      this.commentRequest.product_id = id
      GetCommentListByProduct(this.commentRequest).then(res => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },
    scroll(data) {
      if (data.isFixed) {
        this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
      } else {
        this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
      }
    },
    GetStoreInfo() {
      GetStoreInfo(this.requestData).then(res => {
        if (res) {
          const _this = this
          const _data = res.Data
          const _province = _data.ProvinceName || ''
          const _city = _data.CityName || ''
          const _detailAddress = _data.ContactAddress || ''
          _data.DetailAddress = _province + _city + _detailAddress
          _this.bussinessItem = _data
          _this.CardNumber = _data.CardNumber

          // 商家介绍
          if (_data.Description) {
            if (_data.Description.indexOf('\n') >= 0) {
              const arr = _data.Description.split('\n')
              arr.forEach(function(item) {
                if (item) {
                  _this.descriptionList.push(item)
                }
              })
            } else {
              _this.descriptionList.push(_data.Description)
            }
          } else {
            _this.descriptionList = ['暂无介绍']
          }
          // 轮播图
          if (res.Data.ShopSign) {
            this.ShopSignList = res.Data.ShopSign.split(',')
          }
        }
      })
    },
    gotobuybill() {
      this.$router.push({
        path: '/buyBill/' + this.CardNumber
      })
    },
    navigation() {
      console.log('导航')
      console.log(this.bussinessItem)
      this.$utils.navigation(this.bussinessItem)
    },
    closeAmap() {
      this.AmapShow = false
    },
        // 重置请求参数及数据
    resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
      this.productList = []
    },
    // 点击分类事件
    treeClickEvent(item, treeItem) {
      if (this.activeId !== item.id) {
        this.activeId = item.id
        this.resetParams()
        this.requestData.typePath = item.parent_path
        this.GetWholeSaleListForSku()
      }
    },
    showOpt(type) {
      console.log(type)
      if (this.detailIndex !== this.SpecIndex) {
        this.optPopup.data = this.productList[this.detailIndex]
      }
      this.optPopup.type = type
      this.optPopup.show = true
    },
  }
}
</script>
<style lang="scss" scoped>
.shop-bg-box {
  width: 750px;
  height: 500px;
}
.description{
  text-indent: 2em
}
.description:not(:last-child){
  padding-bottom:20px
}

.van-button--primary {
  @include bg-primary();
  border: none;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  padding: 0 18px;
  float: right;
}
/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
.mapPage{
width: 100%;
height: 100%;
z-index: $zIndexOverlay;
}
.list-content{
  height: calc(100%);
}
// 以上修整完成
.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup{
  background: transparent;
}
.detail-page{
  background: $colorF5;
}

.tab-bar {
  display: flex;

  flex-direction: row;
  background: $colorF;
  padding: 20px 0;
  .tab-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .teb-item-text {
      display: flex;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .teb-item-border {
      display: flex;
      width: 80px;
      height: 6px;
      border-radius: 3px;
      background: rgba($color: #000000, $alpha: 0);
    }
  }
  .activeBorder {
    .teb-item-text {
      @include color-primary;
    }
    .teb-item-border {
      @include bg-primary();
    }
  }
}
.filter-tab {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 10px 24px 20px;
  .filter-item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(33% - 15px);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 54px;
    background: $colorF4;
    border: solid 1px $colorF4;
  }
  .filter-checked{
    @include color-primary;
    background: $colorF;
    @include border-primary;
  }
  .filter-active{
    background: transparent;
    color:#000 !important;
    position: relative;
    @include border-primary;
    &:after{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include color-primary;
      @include bg-primary;
      opacity: 0.1;
      border-radius: 10px;
    }
  }
  .change-theme {
    background: $colorF;
    border: solid 1px #171817;
  }
  .filter-pop{
    position: absolute;
    z-index: $zIndexPopup;
    top: 84px;
    left: 0;
    width: 100%;
    height: calc(100vh - 370px);
    .filter-cover{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width:100%;
      background:$colorOverlay;
    }
    .filter-pop-content{
      position: relative;
      background: $colorF;
      .filter-pop-item-box{
        padding:40px 24px 50px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .filter-pop-item{
          flex-shrink: 0;
          flex-grow: 0;
          position: relative;
          width: calc(33.33% - 14px);
          margin-right: 20px;
          margin-bottom: 20px;
          text-align: center;
          line-height: 72px;
          padding: 0 20px;
          background: $colorF4;
          border: solid 1px $colorF4;
          border-radius: 6px;
          &:nth-child(3n){
            margin-right: 0px;
          }
        }
        .filter-selected{
          @include color-primary;
          border-color: currentColor;
          &:before,&:after{
            content: '';
            position: absolute;
          }
          &:before{
            background: currentColor;
            width: 54px;
            height: 54px;
            border-radius: 100%;
            bottom: -27px;
            right: -27px;
          }
          &:after{
            width: 6px;
            height: 12px;
            border: 5px solid;
            border-color: transparent $colorF $colorF  transparent ;
            transform: rotate(45deg);
            bottom: 6px;
            right: 4px;
          }
        }
      }
      .filter-pop-item-box-1{
        padding:30px 24px 40px;
        font-size: 26px;
        .filter-pop-item-1{
          padding: 30px 0;
        }
        .item-checked{
          position: relative;
          @include color-primary;
          &:after{
             content: '';
            position: absolute;
            width: 6px;
            height: 18px;
            border: 5px solid;
            border-color: transparent currentColor currentColor  transparent ;
            transform: rotate(45deg);
            bottom: 40px;
            right: 10px;
          }
        }
      }
      .filter-bottom{
        padding: 32px 24px;
        position: relative;
        .btn{
          width: calc(50% - 20px);
          line-height: 72px;
          border-radius: 8px;
        }
      }
    }
  }
}
.zIndexBottom{
  z-index: $zIndexHeader;
}
</style>
